<template>
  <!-- 智慧贷款的产品详情 -->
  <div class="loansDrawer-box">
    <!-- 贷款机构 -->
    <div class="loans-box organ">
        <h3>贷款机构</h3>
        <ul v-if="organizationObj.name">
            <li>
                <span>机构名称</span>
                <p>{{organizationObj.name}}</p>
            </li>
            <li>
                <span>使用地区</span>
                <p>{{getCityCodes()}}</p>
            </li>
        </ul>
    </div>
    <!-- 贷款品种 -->
    <div class="loans-box">
        <h3>贷款品种</h3>
        <ul v-if="loanObj.name">
            <li>
                <span>品种名称</span>
                <p>{{loanObj.name}}</p>
            </li>
            <li>
                <span>最高额度</span>
                <p>{{loanObj.amount / 10000}}万</p>
            </li>
            <li>
                <span>最高期限</span>
                <p>{{loanObj.term}}年</p>
            </li>
            <li>
                <span>名义利率</span>
                <p>{{loanObj.nominalRate}}%</p>
            </li>
            <li>
                <span>办结天数</span>
                <p>{{loanObj.closingDays}}天</p>
            </li>
            <li>
                <span>还贷方式</span>
                <p>{{getRepay()}}</p>
            </li>
        </ul>
    </div>
    <!-- 资格条件 -->
    <div class="loans-box">
        <h3>资格条件</h3>
        <div class="cond_tit">
            <span class="cond_span">序号</span>
            <p>资格</p>
            <p>或者</p>
        </div>
        <div class="cond_list" v-for="(cond,index) in qualifData" :key="index">
            <span class="cond_span">{{index+1}}</span>
            <el-popover placement="top-start" width="300" trigger="hover" :content="cond.name">
                <p slot="reference">{{cond.name}}</p>
            </el-popover>
            <el-popover placement="top-start" width="300" trigger="hover" :content="getMaybeName(cond)">
                <span slot="reference">{{getMaybeName(cond)}}</span>
            </el-popover>
        </div>
    </div>
    <!-- 押品押率 -->
    <div class="loans-box">
        <h3>押品押率</h3>
        <div class="collateral-box" >
            <h3>
                <p>类型</p>
                <p>名称</p>
                <p>单位</p>
                <p>关系</p>
                <p>最高抵押率(%)</p>
            </h3>
            <ul>
                <li v-for="(item,index) in collateralData" :key="index">
                    <p>{{getType(item.type)}}</p>
                    <p>{{item.name}}</p>
                    <p>{{item.unit || '--'}}</p>
                    <p>{{getCalculation(item)}}</p>
                    <p>{{item.mortgageRate | sumFilters}}</p>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
import {getLoanListApi} from "@/wss/newApi_3-24/tool/loan.js"
import {getLoanOrganizationListApi} from "@/wss/newApi_3-24/tool/loanOrganization.js"
import { getLoanConditionListApi } from "@/wss/newApi_3-24/tool/loanCondition.js"
import {getCollateralRateListApi,getCollateralTypeListApi} from "@/wss/newApi_3-24/tool/collateralRate.js"
import { CodeToText } from "element-china-area-data";
export default {
    name: 'LoansDrawer',
    props:{
        // 三级类型信息
        projectTypeInfo: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return{
            loanObj: {}, //贷款品种
            organizationObj: {},//贷款机构
            allConds: [],//所有资格条件集合
            qualifData: [],//资格条件数据
            collateralData:[],//所有押品押率的集合
            pawnList:[],//所有抵押物列表
        }
    },
    watch:{
        async projectTypeInfo(){
            await this.getLoanList() // 查询贷款品种
            await this.getLoanConditionList() // 获取所有资格条件
        }
    },
    async mounted(){
        if(this.projectTypeInfo.id){
            await this.getLoanList() // 查询贷款品种
            await this.getLoanConditionList() // 获取所有资格条件
        }
    },
    methods:{
        // 查询贷款品种
        async getLoanList(){
            let project_id = this.projectTypeInfo.id
            let result = await getLoanListApi({project_id})
            if(result.code==200){
                this.loanObj = result.rows[0]

                await this.getLoanOrganizationList() // 查询贷款机构
                await this.getCollateralRateList()// 获取押品押率
                await this.getCollateralTypeList() //获取抵押物列表
                this.getTypeInfo() // 获取类型、名称、单位
            }
        },

        // 查询贷款机构
        async getLoanOrganizationList(){
            let id = this.loanObj.organizationId
            let result = await getLoanOrganizationListApi({id})
            if(result.code==200){
                this.organizationObj = result.rows[0]
            }
        },

        // 获取所有资格条件
        async getLoanConditionList(){
            let result = await getLoanConditionListApi()
            if(result.code==200){
                this.allConds = result.rows
                this.getQualifData() // 过滤出当前的条件集合码
            }
        },

        // 过滤出当前的条件集合码
        getQualifData(){
            let arr = []
            //条件集合码有的话才分割
            if(this.loanObj.conditionIds){
                arr = this.loanObj.conditionIds.split(',')
            }

            let filter = []
            arr.forEach(item=>{
                let itemArr = item.split('|')
                let obj = this.allConds.find(k=>{
                    return k.id == itemArr[0]
                })
                // 过滤得出来的话才去push
                if(obj){
                    // obj.maybe=[]
                    let newItemArr = itemArr.slice(1);
                    obj.maybe = newItemArr.map(Number)
                    filter.push(obj)
                }
            })
            this.qualifData = JSON.parse(JSON.stringify(filter)) // 关键资格数据
        },

        // 获取押品押率
        async getCollateralRateList(){
            let loan_id = this.loanObj.id
            let result = await getCollateralRateListApi({loan_id})
            if(result.code==200){
                this.collateralData = result.rows
                console.log(this.collateralData,'获取押品押率');
            }
        },

        // 获取抵押物列表
        async getCollateralTypeList(){
            let result = await getCollateralTypeListApi()
            if(result.code == 200){
                this.pawnList = result.rows
            }
        },

        // 获取类型、名称、单位
        getTypeInfo(){
            this.collateralData.forEach(async item=>{
                let obj = this.pawnList.find(i=>{
                    return item.typeId == i.id
                })
                item.type = obj.type
                this.$set(item,'name',obj.name)
                this.$set(item,'unit',obj.unit)
            })
        },

        //获取类型
        getType(type){
            // 1实物，2信用类型，3金融资产 4特殊许可
            if(type == '1'){
                return '实物资产'
            }else if(type == '2'){
                return '信用类型'
            }else if(type == '3'){
                return '金融资产'
            }else{
                return '特殊许可'
            }
        },

        // 获取关系 
        getCalculation(item){
            // 1相加/累加，2max/最大，3min/最小
            if(item.calculation == '1'){
                return '累加'
            }else if(item.calculation == '2'){
                return '最大'
            }else{
                return '最小'
            }
        },

        // 获取 回显资格或者
        getMaybeName(item){
            let str = ''
            if(item.maybe.length){
                item.maybe.forEach(may=>{
                let obj = this.allConds.find(s=>{
                    return s.id == may
                })
                if(str){
                    str = str+','+obj.name
                }else{
                    str = obj.name
                }
                })
            }
            return str
        },

        // 获取使用地区
        getCityCodes(){
            let city = []
            let list = this.organizationObj.cityCodes.split(',')
            list.forEach(item => {
                city.push(CodeToText[item])
            });
            return city.join(',')
        },

        // 获取还贷方式
        getRepay(){
            const stateMap = {
                1: "等额本息",
                2: "等额本金",
                3: "先息后本-年",
                4: "先息后本-月",
                5: "先息后本-季",
            };
            return stateMap[this.loanObj.repaymentType];
        },
        
    },
}
</script>

<style scoped lang="scss">
h3,p,li,ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.loansDrawer-box{
    padding: 0 30px;
}

.loans-box{
    border-bottom: 1px solid #efefef;
    margin-bottom: 30px;
    h3{
        color: #2E3F5E;
        font-size: 16px;
        margin-bottom: 15px;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        font-size: 15px;
        li{
            width: 33%;
            color: #999;
            line-height: 30px;
            margin-bottom: 10px;
            p{
                color: #333;
            }
        }
    }

    // 资格
    .cond_tit,
    .cond_list{
        display: flex;
        font-size: 13px;
        color: #999;
        line-height: 46px;
        font-weight: bold;
        >p,>span{
            width: 45%;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow:ellipsis;
        }
        .cond_span{
            width: 10%;
        }
    }
    .cond_list{
        font-size: 15px;
        font-weight: 400;
        color: #333;
        border-top: 1px solid #efefef;
    }
}
.organ{
    ul{
        li{
            width: 50%;
        }
    }
}

/* 押品押率 */
.collateral-box{
    margin-bottom: 60px;
    h3{
        display: flex;
        font-size: 13px;
        font-weight: 600;
        color: #999;
        border-bottom: 1px solid #ebeef5;
        padding-bottom: 15px;
        margin-top: 25px;
        margin-bottom: 12px;
        p{
            width: 25%;
            &:last-child{
                text-align: right;
            }
        }
    }
    ul{
        display: block;
        li{
            width: 100%;
            display: flex;
            font-size: 14px;
            font-weight: 400;
            color: #2E3F5E;
            padding: 0px;
            p{
                width: 25%;
                &:last-child{
                    text-align: right;
                }
            }
        }
    }
}
</style>